<template>
  <div>
    <div class="header">
      <!--<img v-bind:src="[header+info.data.logo]">-->
      <router-link to="/aboutUs">关于我们</router-link>
      <router-link to="/introduction">公司简介</router-link>
      <router-link to="/index">首页</router-link>
    </div>
    <div class="main">
      <span>
				首 页>新 闻 中 心
			</span>
      <div class="newLogo">
        <img src="../assets/新闻资讯-新闻中心页@2x.png" alt="">
      </div>
      <div class="center">
        <h3>{{info.data.newsTitles}}</h3>
      </div>
      <div class="time">
        <span>发布时间：{{dateFormat(info.data.newsAddTime)}}</span>
      </div>
      <div class="img">
        <img :src="header+info.data.newsImgPath" />
      </div>
      <div v-html="info.data.newsContent">
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "NewDetail",
      data() {
        return {
          header: "https://sy.mujiwulian.net/sy/",
          info: {
            code:null,
            msg:"",
            data:{
              id:null,
              newsTitles:'',
              newsImgPath:'',
              newsAbs:'',
              newsContent:'',
              newsAddTime:null
            }
          }
        }
      },
      mounted() {
        this.$axios
          .get("https://sy.mujiwulian.net/sy/website/news/detail/?sy="+
            this.$store.getters.getUser.sy+"&id="+this.$route.params.id)
          .then(response=>(this.info=response.data));
      },
      methods: {
        dateFormat: function (time) {
          let date = new Date(time);
          let year = date.getFullYear();
          /* 在日期格式中，月份是从0开始的，因此要加0
           * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
           * */
          let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
          let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
          let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
          let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
          let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
          // 拼接
          return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
        }
      }
    }
</script>

<style scoped>
  *{
    margin: 0px;
    padding: 0px;
  }
  .header{
    height: 40px;
    background-color: rgb(133,160,173);
    margin-bottom: 12px;
  }
  .header a{
    color: rgb(97,62,147);
    height: 100%;
    font-size: 15px;
    font-weight: 100;
    float: right;
    display:block;
    width: 65px;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    line-height: 40px; /* 设置垂直居中 */
  }
  .main>span{
    color: rgb(131,131,131);
    font-size: 15px;
    margin: 20px;
  }
  .main>.newLogo{
    display: block;
    text-align: center;
  }
  .main>.newLogo>img{
    margin: 20px;
    height: 36px;
    width: auto;
  }
  .main>.center{
    text-align: center;
    font-size: 16px;
  }
  .main>.time{
    float: right;
    margin-right: 20px;
    margin-top: 10px;
    font-size: 10px;
    font-weight:100;
  }
  .main>.img{
    display: block;
    text-align: center;
  }
  .main img{
    width: 80%;
    height: auto;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
</style>
